<template>
  <div class='container'>
    <el-card class="title-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20" class="title-row">
                <el-col :span="7">
                  <span>关键字</span>&nbsp;
                  <el-input size="mini" placeholder="请输入内容" v-model="queryInfo.query">
                  </el-input>
                </el-col>
                <el-col :span="7">
                  <span>状态</span>&nbsp;
                  <el-select style="width:80%;" size="mini"
                   v-model="selectvalue" placeholder="请选择">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="1.5">
                  <el-button size="mini" @click="delclear" >清除</el-button>
                </el-col>&nbsp;
                <el-col :span="1.5">
                  <el-button @click="searchArticle" type="primary" size="mini">搜索</el-button>
                </el-col>
                <el-col :span="4" style="float:right">
                  <el-button @click="previewVisible = true" size="mini" type="primary"
                  class="el-icon-edit new-increate" style="float:right">新增技巧</el-button>
                </el-col>
            </el-row>
            <!-- 消息提示 -->
            <el-alert
              :title="`数据一共${counts}条`"
              type="info" :closable="false"
              show-icon>
            </el-alert>
            <!-- 用户列表区域 -->
            <el-table :data="articlelist" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="文章标题" prop="title">
                  <template slot-scope="scope">
                      {{scope.row.title}}
                      <img :src="scope.row.videoURL?'/src/icons/svg/eye.svg':''"
                      @click="displayvideo" style="cursor:pointer">
                  </template>
                </el-table-column>
                <el-table-column label="阅读数" prop="visits"></el-table-column>
                <el-table-column label="录入人" prop="username"></el-table-column>
                <el-table-column label="录入时间" prop="createTime">
                  <template slot-scope="scope">
                      {{scope.row.createTime | dateFormat}}
                  </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-text="scope.row.state?'已启用':'已禁用'"
                        disabled></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <!-- 预览按钮 -->
                        <el-button @click="articleDetail(scope.row.id, scope.row.username)"
                        type="text" size="mini">预览</el-button>
                        <!-- 禁用按钮 -->
                        <el-button v-text="scope.row.state?'禁用':'启用'"
                        @click="changestate(scope.row.id, scope.row.state?0:1)"
                        type="text" size="mini"></el-button>
                        <!-- 修改按钮 -->
                        <el-button @click="showEditDialog(scope.row.id)" :disabled="scope.row.state?true:false"
                         type="text" size="mini">修改</el-button>
                        <!-- 删除按钮 -->
                        <el-button @click="delArticle(scope.row.id)" :disabled="scope.row.state?true:false"
                         type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum" :page-sizes="[1,2,5,10]"
            :page-size="queryInfo.pagesize" style="float:right"
            layout="total,sizes, prev, pager, next,jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 新增文章对话框 -->
        <el-dialog title="新增文章" :visible.sync="previewVisible"
        width="65%" @close="addDialogClosed">
          <el-form label-width="100px" :model="addForm" :rules="addFormRules" ref="addFormRef">
          <el-form-item label="文章标题" prop="addtitle" >
            <el-input placeholder="请输入文章标题" v-model="addForm.addtitle"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="addcontent">
            <quill-editor v-model="addForm.addcontent" @blur="onblur">
            </quill-editor>
            <span
            style="color:#f56c6c;font-size:12px;display:none"
            ref="hintText"
            >请输入文章内容</span>
          </el-form-item>
          <el-form-item label="视频地址" prop="addvideo">
            <el-input placeholder="请输入视频地址" v-model="addForm.addvideo"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="previewVisible = false">取消</el-button>
            <el-button type="primary" @click="addArticle">确认</el-button>
          </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 预览文章或视频对话框 -->
        <el-dialog title="预览文章" :visible.sync="viewsVisible"
        width="60%">
        <div class="views-title">
          <h3>{{ details.title }}</h3>
          <span>{{ details.createTime | dateFormat }}</span>&nbsp;
          <span>{{ details.username }}</span>&nbsp;
          <img width="16px" height="16px" src="../../icons/eye.png"
          style="padding-top:6px;">
          <span>{{ details.visits }}</span>
        </div>
        <div class="views-body" v-html="details.articleBody"></div>
        </el-dialog>
        <!-- 修改文章对话框 -->
        <el-dialog title="新增文章" :visible.sync="editVisible"
        width="65%">
          <el-form ref="editFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="name" >
            <el-input placeholder="请输入文章标题" v-model="editform.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="name">
            <quill-editor v-model="editform.articleBody">
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" prop="name">
            <el-input placeholder="请输入视频地址" v-model="editform.videoURL"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="editVisible = false">取消</el-button>
            <el-button type="primary" @click="editArticle">确认</el-button>
          </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 视屏对话框 -->
        <el-dialog
        :visible.sync="videoVisible"
        width='680px'
        heigth='420px'
        top="18vh"
        @close="closeDialog"
        id="videoid"
        >
          <video :src="details.videoURL" autoplay controls ref="dialogVideo"
           width="100%"></video>
        </el-dialog>
  </div>
</template>

<script>
import { list, changeState, add, remove, detail, update } from '@/api/hmmm/articles.js'
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      articlelist: [],
      total: 0,
      counts: 0,
      previewVisible: false,
      viewsVisible: false,
      editVisible: false,
      status: [{
        id: 0,
        value: '禁用'
      },
      {
        id: 1,
        value: '启用'
      }
      ],
      selectvalue: '',
      state: 0,
      selectstate: '',
      addForm: {
        addtitle: '',
        addvideo: '',
        addcontent: ''
      },
      addFormRules: {
        addtitle: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: 'blur'
          }
        ]
      },
      details: {},
      editform: {},
      videoVisible: false
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      // console.log(list())
      const { data } = await list({ page: this.queryInfo.pagenum, pagesize: parseInt(this.queryInfo.pagesize) })
      // const res = await list()
      // console.log(data)
      // console.log(data.items)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('获取文章列表失败')
      // }
      this.articlelist = data.items
      this.total = data.counts
      this.counts = data.counts
    },
    // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = parseInt(newSize)
      this.getArticleList()
    },
    // 监听页码值改变
    handleCurrentChange (newpPage) {
      this.queryInfo.pagenum = newpPage
      this.getArticleList()
    },
    // 清除搜索框
    delclear () {
      this.selectvalue = ''
      this.queryInfo.query = ''
      this.getArticleList()
    },
    // 改变启用状态
    async changestate (ids, states) {
      const data = await changeState({ id: ids, state: states })
      // console.log(data)
      if (data.status === 200) {
        this.getArticleList()
        this.$message.success('更新状态成功')
      }
    },
    // 搜索文章列表
    async searchArticle () {
      let data = {}
      if (this.selectvalue === '启用') {
        this.selectstate = 1
      } else if (this.selectvalue === '禁用') {
        this.selectstate = 0
      } else {
        this.selectstate = ''
      }
      if (this.selectvalue === '' && this.queryInfo.query === '') {
        data = await list()
      } else {
        data = await list({ keywords: this.queryInfo.query, state: this.selectstate })
      }
      this.articlelist = data.data.items
    },
    // 添加文章
    async addArticle () {
      if (this.addForm.addtitle.trim() === '' || this.addForm.addcontent.trim() === '') {
        this.$message('文章标题或内容不能为空')
        return
      }
      const { data } = await add({
        title: this.addForm.addtitle,
        articleBody: this.addForm.addcontent,
        videoURL: this.addForm.addvideo
      })
      // console.log(data)
      if (data) {
        this.$message.success('添加文章列表成功')
        this.previewVisible = false
        this.getArticleList()
      } else {
        this.$message.error('添加文章列表失败')
      }
    },
    // 验证富文本编辑框
    onblur () {
      if (this.addForm.addcontent.trim() === '') {
        this.$refs.hintText.style.display = 'block'
      } else {
        this.$refs.hintText.style.display = 'none'
      }
    },
    // 监听添加用户的对话框关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 删除文章
    async delArticle (ids) {
      const confirmResult = await this.$confirm('此操作将永久删除该文章，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data } = await remove({ id: ids })
      // console.log(data)
      if (data.success) {
        this.$message.success('删除文章列表成功')
        this.getArticleList()
      } else {
        this.$message.error('删除文章列表失败')
      }
    },
    // 文章详情展示
    async articleDetail (ids, uname) {
      const { data } = await detail({ id: ids })
      this.viewsVisible = true
      // console.log(data)
      this.details = data
      this.details.username = uname
    },
    // 展示修改文章对话框
    async showEditDialog (ids) {
      this.editVisible = true
      const { data } = await detail({ id: ids })
      this.editform = data
    },
    // 修改文章
    async editArticle () {
      if (this.addForm.addtitle.trim() === '' || this.addForm.addcontent.trim() === '') {
        this.$message('文章标题或内容不能为空!!')
        return
      }
      const { data } = await update({ id: this.editform.id, title: this.editform.title, articleBody: this.editform.articleBody })
      // console.log(data)
      if (data.success) {
        this.$message.success('修改文章列表成功')
        this.editVisible = false
        this.getArticleList()
      } else {
        this.$message.error('修改文章列表失败')
      }
    },
    closeDialog () {
      this.$refs.dialogVideo.pause()
      this.details.videoURL = ''
      // console.log(2222)
    },
    // 播放视屏对话框展示
    displayvideo () {
      this.videoVisible = true
    }
  }
}

</script>

<style scoped lang='less'>
  /deep/.ql-editor {
    min-height: 300px;
  }
  .title-row{
    .el-input{
      width: 60%!important;
    }
  }
  // .new-increate{
  //   margin-left: 87%;
  // }
  /deep/.el-alert{
    margin: 2px 0;
  }
  #videoid{
    /deep/.el-dialog{
      background-color: transparent;
    }
    /deep/.el-dialog__body{
      padding: 0;
      video{
        height: 100%;
      }
    }
    /deep/.el-dialog__headerbtn{
      padding: 0;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 2px #a9a3a2;
      border-radius: 50%;
    }
    /deep/.el-dialog__header{
      padding: 0;
    }
  }
</style>
